<template>
    <div
      style="display: flex;flex-direction: column;align-items: center;position: relative;"
      :style="{
        'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
        'width': nodeModel.configDict.componentStyle.widthForFlex1/2 + 'px',
        'height': nodeModel.configDict.componentStyle.heightForFlex1/2 + 'px'
      }">
      <el-image :src="nodeModel.configDict.componentStyle.coverUrl" fit="fill"
        style="flex-shrink: 0;width: 100%;height: 100%;position: absolute;z-index: 0;"></el-image>
      <!-- 个人信息 -->
      <div style="display: flex;flex-direction: row;align-items: center;z-index: 1;"
        v-if="nodeModel.configDict.componentStyle.isShowForFlex2"
        :style="{
          'marginTop': nodeModel.configDict.componentStyle.marginTopForFlex2/2 + 'px',
          'flex-direction': nodeModel.configDict.componentStyle.flex_directionForFlex2,
          'align-items': nodeModel.configDict.componentStyle.align_itemsForFlex2,
        }"
        >
        <el-image :src="userModel.avatarUrl_new" fit="cover"
          style="flex-shrink: 0;"
          :style="{
          'width': nodeModel.configDict.componentStyle.widthForCover2/2 + 'px', 
          'height': nodeModel.configDict.componentStyle.heightForCover2/2 + 'px',
          'borderRadius': nodeModel.configDict.componentStyle.borderRadiusForCover2/2 + 'px'
        }"></el-image>
        <div style="margin-left: 8px;">
          <div :style="{
            'marginTop': nodeModel.configDict.componentStyle.marginTopForText2/2+'px',
            'color': nodeModel.configDict.componentStyle.colorForText2,
            'font-size': nodeModel.configDict.componentStyle.fontsizeForText2/2 + 'px',
            'font-weight': nodeModel.configDict.componentStyle.fontweightForText2,
          }">{{userModel.nickname}}</div>
          <div :style="{
            'marginTop': nodeModel.configDict.componentStyle.marginTopForText3/2+'px',
            'color': nodeModel.configDict.componentStyle.colorForText3,
            'font-size': nodeModel.configDict.componentStyle.fontsizeForText3/2 + 'px',
            'font-weight': nodeModel.configDict.componentStyle.fontweightForText3,
          }">{{userModel.content}}</div>
        </div>
      </div>
      <!-- 二维码 -->
      <div style="display: flex;flex-direction: column;align-items: center;z-index: 1;"
      :style="{
        'marginTop': nodeModel.configDict.componentStyle.marginTopForFlex1/2 + 'px',
        'flex-direction': nodeModel.configDict.componentStyle.flex_directionForFlex1,
        'align-items': nodeModel.configDict.componentStyle.align_itemsForFlex1,
      }"
      >
        <el-image :src="nodeModel.avatarUrl" fit="cover"
          style="flex-shrink: 0;"
          :style="{
          'width': nodeModel.configDict.componentStyle.widthForCover1/2 + 'px', 
          'height': nodeModel.configDict.componentStyle.widthForCover1/2 + 'px'
        }"></el-image>
        <!-- 推荐码 -->
        <div style="display: flex;flex-direction: row;align-items: center;margin-left: 8px;" v-if="nodeModel.configDict.componentStyle.isShowForText1"
          :style="{
            'marginTop': nodeModel.configDict.componentStyle.marginTopForText1/2+'px',
            'color': nodeModel.configDict.componentStyle.colorForText1,
            'font-size': nodeModel.configDict.componentStyle.fontsizeForText1/2 + 'px',
            'font-weight': nodeModel.configDict.componentStyle.fontweightForText1
          }">
          <div v-if="nodeModel.configDict.componentStyle.titleForText1">{{nodeModel.configDict.componentStyle.titleForText1}}</div>
          <div>{{userModel.code}}</div>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
      nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    data() {
      return {
        userModel: {}
      }
    },
    created() {
      this.userModel = this.$store.getters.userModel
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>

</style>